<template>
	<view>
		<!-- <cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">新股认购</block>
		</cu-custom> -->
		<!-- <view class="onebox">
			<view class="one_left">
				<wzh-btn pattern="6" text="登录查看申购额度"></wzh-btn>
				<view class="apply_text">申购指南</view>
			</view>
			<view class="linebox"></view>
			<view class="one_right">
				<view class="img_list">
					<image class="img" mode="aspectFill" src="../../static/finance.png"></image>
					<view class="text_record">申购记录</view>
				</view>
				<view class="img_list">
					<image class="img" mode="aspectFill" src="../../static/history.png"></image>
					<view class="text_record">历史中签</view>
				</view>
			</view>
		</view> -->
		
		<view class="toggleItem">
			<view class="toggleItemInhalt">
				<view class="optionId" :class="clicknum==1?'Select':'Unchecked'" @click="isActive(1)">{{$t('subscribe.open')}}</view>
				<view class="optionId" :class="clicknum==2?'Select':'Unchecked'" @click="$replaceTo('/to_be_list')">{{$t('subscribe.to-be-list')}}</view>
				<view class="optionId" :class="clicknum==3?'Select':'Unchecked'" @click="$replaceTo('/orders_history')">{{$t('subscribe.orders')}}</view>
			</view>
		</view>
		
		<view class="detail" v-for="(item,index) in list" :key='index' v-if="clicknum==1" @click="$navTo('/ipo_details',{id:item.id})">
			<!-- <navigator url="new-certification"> -->
			<view class="abox">
				<view>
					<view class="leftbox">
						<!-- <view class="alefTtext">{{$t('company.semi-holdings')}}</view> -->
						<view class="alefTtext">{{$getLocaleField(item, 'company_name')}}</view>
						<!-- <view class="btagbox"></view> -->
						<logo pattern="3" :text="$t('subscribe.available')"></logo>
					</view>
					<view class="belowbox">
						<!-- <view class="ablowtext">HK</view> -->
						<logo pattern="2" :text="item.location"></logo>
						<view class="b_blowtext">{{item.symbol}}</view>
					</view>
				</view>
				<!-- <view>
					<wzh-btn pattern="7" text="预约"></wzh-btn>
				</view> -->
			</view>
			<view class="bbox">
				<view class="bleft">
					<view class="bleftbox bleftmagin">
						<view class="ableftText">{{$t('subscribe.min-amount')}}</view>
						<!-- <view class="bleftText">{{item.minimal_sub_amount.toLocaleString()}}</view> -->
						<view class="bleftText">{{item.rcf.toLocaleString()}}</view>
					</view>
					<view class="bleftbox">
						<view class="ableftText">{{$t('subscribe.start-date')}}</view>
						<view class="bleftText">{{$timeToStr(item.application_start_date_time)}}</view>
					</view>
				</view>
				<view class="bbottom">
					<view class="bleftbox bleftmagin">
						<view class="ableftText">{{$t('subscribe.issue-price')}}</view>
						<view class="bleftText">
							<!-- <text v-for="(price_item,price_index) in item.IssuingPriceRange" :key='price_index'>
								{{price_index>0?'~':''}}{{price_item}}
							</text> -->
							<text>{{item.low_price_range}}</text>
							<text v-if="item.high_price_range">~{{item.high_price_range}}</text>
						</view>
					</view>
					<view class="bleftbox">
						<view class="ableftText">{{$t('subscribe.remaining')}}</view>
						<view class="bleftText">
							{{$t('start_time_after')}}
							<text class="lastTime">{{item.distance_time[0]}}</text>{{$t('day')}} 
							<text class="lastTime">{{item.distance_time[1]}}</text>{{$t('hour')}} 
							<text class="lastTime">{{item.distance_time[2]}}</text>{{$t('minute')}} 
							{{$t('end_time_after')}}
						</view>
					</view>
				</view>
			</view>
			<!-- </navigator> -->
		</view>
		<zzp-empty v-if="list.length == 0" :text="'暂无新股'"></zzp-empty>
		
		<tooltips-msg ref="message">
			<view>
				<view class="message-box">
					<view>{{$t('ipo_list.message_text_1')}}</view>
					<view>
						<text class="message_text1">{{$t('ipo_list.message_text_2')}}</text>
						<text @tap.stop="toAgreedPdf(1)" class="message_text2">{{$t('check_subscripti.agreed-name-1')}}</text>
						<text class="message_text1">{{$t('ipo_list.message_text_6')}}</text>
						<text @tap.stop="toAgreedPdf(2)" class="message_text2">{{$t('check_subscripti.agreed-name-2')}}</text>
						<text class="message_text1">{{$t('ipo_list.message_text_3')}}</text>
					</view>
					<view class="agree_box" @click="agree(1)">
						<view class="tick_box">
							<image src="../../static/tick.png" class="tick" v-if="ifagree==true"></image>
						</view>
						{{$t('ipo_list.message_text_4')}}
					</view>
					<view class="agree_box" @click="agree(2)">
						<view class="tick_box">
							<image src="../../static/tick.png" class="tick" v-if="showmessage==true"></image>
						</view>
						{{$t('ipo_list.message_text_5')}}
					</view>
				</view>
			</view>
		</tooltips-msg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				time:0,
				clicknum:1,
				list: [],
				// distance_time:[]
				
				ifagree: false,
				showmessage: false
			}
		},
		onLoad() {
			// this.distance_time = this.$getDistanceSpecifiedTime('2023/06/27')
			// 改成无需登入
			// this.$appLogin(()=>{
				this.getList()
				var _showmessage = this.$ZC('ipo_list.showmessage')
				if(!_showmessage){
					this.$nextTick(()=>{
						this.$refs.message.open(this.$t('subscribe_record.retreat_msg'), (res) => {
							if (!this.ifagree) return
							if (this.showmessage) this.$ZC('ipo_list.showmessage', 1, 86400)
							this.$refs.message.close()
						}, this.$t('new-certification.notice'), false)
					})
				}
			// })
		},
		methods: {
			isActive(clicknum){
				if(this.clicknum != clicknum){
					this.clicknum = clicknum
				}
				if(clicknum === 3) {
					uni.navigateTo({
						url: "subscribe_record"
					})
				}
			},
			getList(){
				this.$httpGet({
					url:'ipos/list'
				}).then((res)=>{
					for(var i in res.data.list){
						res.data.list[i].rcf = parseFloat(((res.data.list[i].min_order_size * res.data.list[i].current_price_used_for_creditcheck) * 1.010085).toFixed(2))
						res.data.list[i].distance_time = this.$getDistanceSpecifiedTime(res.data.list[i].application_end_date_time)
					}
					this.list = res.data.list
				})
			},
			agree(type){
				if(type == 1){
					this.ifagree = !this.ifagree
				}
				else if(type == 2){
					this.showmessage = !this.showmessage
				}
			},
			toAgreedPdf(type){
				// location.href = "/hk_eipo/static/Hong_Kong_IPO.pdf"
				if(type == 1){
					// location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Broker%20HK%20IPO%20Subscription%20Policy"
					// if(this.$getLocale()=='zh-Hans'){
					// 	location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Broker%20HK%20IPO%20Subscription%20Policy.pdf"
					// }else{
					// 	// location.href = "https://www.pbnz.net/hk_eipo/pdf/Pioneer Broker HK IPO Subscription Policy.pdf"
					// 	location.href = "https://pbnz.net/hk_eipo/Pioneer%20HK%20IPO%20Policy.html"
					// }
					location.href = "https://www.pbnz.net/doc/hk_ipo_policy"
				}
				else{
					// location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Brokers%20HK%20IPO%20Subscription%20Client%20Agreement"
					// if(this.$getLocale()=='zh-Hans'){
					// 	location.href = "https://pioneer-brokers-oss.oss-cn-shenzhen.aliyuncs.com/hk_eipo/Pioneer%20Brokers%20HK%20IPO%20Subscription%20Client%20Agreement.pdf"
					// }else{
					// 	// location.href = "https://www.pbnz.net/hk_eipo/pdf/Pioneer Brokers HK IPO Subscription Client Agreement.pdf"
					// 	location.href = "https://pbnz.net/hk_eipo/Pioneer%20Client%20Agreement.html"
					// }
					location.href = "https://www.pbnz.net/doc/hk_ipo_client_agreement"
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color: #f4f5f7;
	}

	.onebox{
		height: 181rpx;
		width: 100%;
		display: flex;
		padding-left: 53rpx;
		background-color: #FFFFFF;
		margin-top: 1rpx;
		padding-top: 26rpx;
		box-sizing: border-box;
	}
	
	.img_list{
		width: 120rpx;
		// margin-right: 63rpx;
	}
	
	
	.one_left{
		width: 268rpx;
	}
	
	.login_btn{
		width: 268rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: $main-color;
		border-radius: 8rpx;
		font-size: 26rpx;
	}
	
	.apply_text{
		width: 120rpx;
		font-size: 27rpx;
		color: $main-color;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
		border-bottom-color: $main-color;
		text-align: center;
		margin: auto;
		margin-left: 81rpx;
		margin-top: 23rpx;
	}
	
	.linebox{
		width: 1rpx;
		height: 120rpx;
		background-color: #eeeeee;
		margin-left: 53rpx;
		margin-top: 4rpx;
	}
	
	.one_right{
		// margin-left: 55rpx;
		display: flex;
		justify-content: space-around;
		margin-top: 15rpx;
		flex-grow: 1;
	}
	
	.img{
		width: 49rpx;
		height: 49rpx;
		margin: auto;
		display: block;
		// margin-left: 32rpx;
	}
	
	.text_record{
		font-size: 22rpx;
		color: #333333;
		margin-top: 28rpx;
		text-align: center;
	}
	
	
	.toggleItem {
		border-width: 1rpx;
		border-color: #eeeeee;
		border-top-style: solid;
		background-color: #FFFFFF;
		.toggleItemInhalt {
			width: 695rpx;
			display: flex;
			margin: 0 auto;
			align-items: center;
			flex-flow: row nowrap;
			justify-content: space-around;
			.optionId {
				width: 180rpx;
				text-align: center;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
	
			}
			
			.Select {
				color: $main-color;
				border-bottom-style: solid;
				border-bottom-color: $main-color;
			}
		}
	}
	
	.cutbox{
		width: 100%;
		// height: 80rpx;
		background-color: #FFFFFF;
	}
	
	.cutText{
		font-size: 30rpx;
		padding-bottom: 20rpx;
		border-bottom-width: 5rpx;
		margin-top: 25rpx;
		font-weight: 500;
	}
	
	.cutgray{
		/* border-bottom-style: solid; */
		color: $font-color-two;
	}
	
	.cutblue{
		border-bottom-style: solid;
		color: $main-color;
		border-bottom-color: $main-color;
	}
	
	.cutmagin{
		width: 695rpx;
		margin: auto;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		/* margin-top: 40rpx; */
	}
	
	.detail{
		margin: auto;
		// margin-top: 14rpx;
		// width: 710rpx;
		margin: 14rpx 20rpx 0rpx 20rpx;
		padding-bottom: 33rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding-top: 40rpx;
	}
	
	.abox{
		// width: 660rpx;
		margin: auto 25rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	
	.leftbox{
		display: flex;
		align-items: center;
	}
	
	.alefTtext{
		font-size: 28rpx;
		height: 30rpx;
		width: 550rpx;
		line-height: 30rpx;
		font-weight: 550;
		margin-right: 14rpx;
		
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.btagbox{
		margin-left: 13rpx;
		background-color: #e4f1ff;
		color: $main-color;
		width: 90rpx;
		height: 30rpx;
		text-align: center;
		font-size: 23rpx;
		line-height: 30rpx;
		/* margin-top: 4rpx; */
	}
	
	.belowbox{
		margin-top: 17rpx;
		display: flex;
		align-items: center;
		
	}
	
	.ablowtext{
		width: 40rpx;
		height: 20rpx;
		line-height: 20rpx;
		color: #FFFFFF;
		background-color: #d6abff;
		font-size: 20rpx;
		text-align: center;
		margin-right: 10rpx;
	}
	
	.b_blowtext{
		font-size: 20rpx;
		color: $font-color-two;
		height: 20rpx;
		line-height: 20rpx;
		margin-left: 11rpx;
	}
	
	.aboxbtn{
		margin-top: 7rpx;
		width: 120rpx;
		border-radius: 90rpx;
		border-color: $main-color;
		border-style: solid;
		border-width: 1rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		color: $main-color;
	}
	
	.bbox{
		// width: 660rpx;
		margin: auto 25rpx;
		margin-top: 38rpx;
	}
	
	.lastTime{
		color: #ff8080;
	}
	
	.bleft{
		display: flex;
	}
	
	.bleftbox{
		height: 27rpx;
		width: 50%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		
	}
	
	.bleftmagin{
		margin-right: 32rpx;
	}
	
	.bbottom{
		display: flex;
		margin-top: 34rpx;
	}
	
	.ableftText{
		font-size: 24rpx;
		color: $font-color-three;
		white-space: nowrap;
	}
	
	.bleftText{
		font-size: 24rpx;
		color: $font-color-two;
		white-space: nowrap;
	}
	.message-box{
		font-weight: normal;
		padding: 0 30rpx;
		
		.message_text1 {
			font-size: 25rpx;
			color: $font-color-two;
			vertical-align: middle;
		}
		
		.message_text2 {
			font-size: 25rpx;
			padding-left: 10rpx;
			color: $logo-font-color;
			vertical-align: middle;
		}
		.agree_box {
			position: relative;
			display: flex;
			align-items: center;
			font-size: 25rpx;
			margin-top: 20rpx;
		}
		
		.tick_box {
			width: 27rpx;
			height: 27rpx;
			margin-right: 20rpx;
			border: $font-color-one 2rpx solid;
			position: relative;
			flex-shrink: 0;
		
		}
		
		.tick {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: -10rpx;
			left: -10rpx;
			/* line-height: 50rpx; */
			// text-align: center;
		}
	}
</style>
